<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-forms gv-forms-fluid" layout="column">
  <div class="gv-forms-header">
    <h1>Health-check Configuration</h1>
    <a ng-if="healthCheckCtrl.endpoint !== undefined" ng-click="healthCheckCtrl.backToEndpointConfiguration()"
      >Back to endpoint configuration</a
    >
    <a ng-if="healthCheckCtrl.endpoint === undefined" ng-click="healthCheckCtrl.backToHealthcheck()">Back to Health-check</a>
  </div>
  <div class="gv-form">
    <h2></h2>
    <div class="gv-form-content" layout="column">
      <div layout="row" flex>
        <section layout="column" flex="70" class="configuration-card">
          <md-subheader>General</md-subheader>
          <md-content>
            <md-input-container class="md-block">
              <md-checkbox
                ng-model="healthCheckCtrl.healthcheck.enabled"
                aria-label="Enable health-check"
                class="md-warn md-align-top-left"
                flex
              >
                Enable health-check
                <span class="ipsum" ng-if="healthCheckCtrl.endpoint === undefined">
                  By enabling health-check, all non-backup endpoints will be checked except if health-check is disabled at endpoint
                  level.</span
                >
                <span class="ipsum" ng-if="healthCheckCtrl.endpoint !== undefined"> Enable / disable health-check for this endpoint.</span>
              </md-checkbox>
            </md-input-container>
            <md-input-container class="md-block" ng-if="healthCheckCtrl.endpoint !== undefined">
              <md-checkbox
                ng-model="healthCheckCtrl.healthcheck.inherit"
                ng-disabled="!healthCheckCtrl.rootHealthcheckEnabled"
                aria-label="Inherit health-check"
                class="md-align-top-left"
                flex
              >
                Inherit configuration
                <span class="ipsum" ng-if="healthCheckCtrl.rootHealthcheckEnabled"
                  >Inherit health-check configuration from global health-check configuration.</span
                >
                <span class="ipsum" ng-if="!healthCheckCtrl.rootHealthcheckEnabled"
                  >You must enable a global health-check to be able to inherit from it.</span
                >
              </md-checkbox>
            </md-input-container>
          </md-content>

          <div ng-show="!healthCheckCtrl.healthcheck.inherit && healthCheckCtrl.healthcheck.enabled === true">
            <md-subheader>Trigger</md-subheader>
            <form name="formApiHealthCheckTrigger" novalidate layout="column">
              <md-input-container flex class="md-block">
                <gv-cron-editor
                  required
                  ng-value="healthCheckCtrl.healthcheck.schedule"
                  ng-on-input="healthCheckCtrl.updateSchedule($event)"
                  label="Schedule"
                ></gv-cron-editor>

                <div class="hint">A cron expression to schedule the health check</div>
              </md-input-container>
            </form>

            <md-subheader>Request</md-subheader>
            <md-content>
              <form name="formApiHealthCheckRequest" novalidate layout-gt-sm="row" flex="100">
                <fieldset
                  ng-disabled="formApiHealthCheckTrigger.$invalid"
                  ng-class="{'form-disabled': formApiHealthCheckTrigger.$invalid}"
                  flex="100"
                >
                  <div layout="column">
                    <h5 style="color: grey">Endpoint</h5>
                    <md-input-container>
                      <label>HTTP Method</label>
                      <md-select
                        ng-model="healthCheckCtrl.healthcheck.steps[0].request.method"
                        required
                        ng-disabled="formApiHealthCheckTrigger.$invalid"
                      >
                        <md-option ng-value="httpMethod" ng-repeat="httpMethod in healthCheckCtrl.httpMethods">{{httpMethod}}</md-option>
                      </md-select>
                      <div class="hint">HTTP Method used to health-check endpoint.</div>
                    </md-input-container>

                    <md-input-container>
                      <label>Path</label>
                      <input ng-model="healthCheckCtrl.healthcheck.steps[0].request.path" type="text" required />
                      <div class="hint">Additional path added to the endpoint target.</div>
                    </md-input-container>

                    <md-checkbox
                      ng-model="healthCheckCtrl.healthcheck.steps[0].request.fromRoot"
                      aria-label="Run request from root path"
                      class="md-align-top-left"
                    >
                      From root path ('/')<br />
                      <span class="ipsum">
                        When "from root" is enabled, the path is appended to the root path ('/') of the endpoint without any additional path
                        configured at the endpoint level.
                      </span>
                    </md-checkbox>
                  </div>

                  <div
                    layout="row"
                    layout-sm="column"
                    ng-if="healthCheckCtrl.healthcheck.steps[0].request.method !== 'GET' && healthCheckCtrl.healthcheck.steps[0].request.method !== undefined"
                  >
                    <md-input-container class="md-block" flex-gt-sm>
                      <label>Request Body</label>
                      <textarea
                        ng-model="healthCheckCtrl.healthcheck.steps[0].request.body"
                        md-maxlength="1000"
                        rows="5"
                        md-select-on-focus
                      ></textarea>
                      <div class="hint">
                        <ng-md-icon icon="error_outline" style="fill: red"></ng-md-icon>Make sure to add Content-Type header for POST/PUT
                        HTTP method
                      </div>
                    </md-input-container>
                  </div>

                  <div layout="column" layout-sm="column">
                    <h5 style="color: grey">
                      <span>Headers</span>
                      <ng-md-icon
                        icon="add_circle_outline"
                        style="fill: #b1bdc5"
                        aria-label="Add HTTP header"
                        ng-click="healthCheckCtrl.addHTTPHeader()"
                        >Add headers</ng-md-icon
                      >
                    </h5>
                    <div class="healthcheck-endpoint-headers" ng-repeat="header in healthCheckCtrl.healthcheck.steps[0].request.headers">
                      <ng-md-icon
                        class="healthcheck-endpoint-headers__remove"
                        icon="remove_circle_outline"
                        style="fill: #b1bdc5"
                        aria-label="Delete header"
                        ng-click="healthCheckCtrl.removeHTTPHeader($index)"
                      ></ng-md-icon>

                      <gv-input
                        class="healthcheck-endpoint-headers__key"
                        required
                        gv-model
                        label="Header name"
                        ng-model="header.name"
                        ngDefaultControl
                      >
                      </gv-input>

                      <gv-expression-language
                        class="healthcheck-endpoint-headers__value"
                        required
                        rows="1"
                        gv-model
                        label="Header value (Supports EL)"
                        ng-attr-grammar="{{healthCheckCtrl.spelGrammar}}"
                        ng-model="header.value"
                        placeholder="{#dictionaries['my-dictionary']['my-property']}"
                        ngDefaultControl
                      ></gv-expression-language>
                    </div>
                  </div>
                </fieldset>
              </form>
            </md-content>

            <br />

            <md-subheader>
              Assertions
              <ng-md-icon
                icon="info"
                style="fill: #b1bdc5"
                aria-label="Expectation info"
                ng-click="healthCheckCtrl.showAssertionInformation()"
              ></ng-md-icon>
              <ng-md-icon
                icon="add_circle_outline"
                style="fill: #b1bdc5"
                aria-label="Add assertion"
                ng-click="healthCheckCtrl.addAssertion()"
              ></ng-md-icon>
            </md-subheader>
            <form name="formApiHealthCheckResponse" novalidate layout-gt-sm="row" flex="100">
              <fieldset
                ng-disabled="formApiHealthCheckTrigger.$invalid"
                ng-class="{'form-disabled': formApiHealthCheckTrigger.$invalid}"
                flex="100"
              >
                <div layout="column" layout-sm="column">
                  <div
                    layout="row"
                    layout-sm="column"
                    ng-repeat="assertion in healthCheckCtrl.healthcheck.steps[0].response.assertions track by $index"
                  >
                    <ng-md-icon
                      size="24"
                      icon="remove_circle_outline"
                      style="fill: #b1bdc5"
                      aria-label="Delete assertion"
                      ng-click="healthCheckCtrl.removeAssertion($index)"
                    ></ng-md-icon>
                    <md-input-container flex-gt-sm>
                      <label>Assertion #{{$index+1}}</label>
                      <input ng-model="healthCheckCtrl.healthcheck.steps[0].response.assertions[$index]" type="text" required />
                    </md-input-container>
                  </div>
                </div>
              </fieldset>
            </form>
          </div>

          <div layout="row">
            <md-button
              class="md-raised md-primary"
              type="submit"
              ng-click="healthCheckCtrl.update()"
              ng-disabled="((healthCheckCtrl.healthcheck.inherit === false && healthCheckCtrl.healthcheck.enabled === true) && (formApiHealthCheckTrigger.$invalid || formApiHealthCheckResponse.$invalid || formApiHealthCheckRequest.$invalid))"
            >
              Save
            </md-button>
          </div>
        </section>

        <div class="healthcheck-summary-timeline-wrapper" layout-padding flex="30">
          <div>
            <h4>Summary</h4>
            <md-divider></md-divider>
          </div>
          <div class="healthcheck-summary-timeline">
            <timeline ng-if="!healthCheckCtrl.healthcheck.enabled">
              <timeline-event side="right">
                <timeline-badge>
                  <gv-icon class="healthcheck-timeline-icon" shape="av:play_arrow"> </gv-icon>
                </timeline-badge>
                <timeline-panel class="disable">
                  <timeline-heading>
                    <div class="healthcheck-summary-timeline-title">Trigger</div>
                  </timeline-heading>
                  <p>Health-check is disabled</p>
                </timeline-panel>
              </timeline-event>
            </timeline>
            <timeline ng-if="healthCheckCtrl.healthcheck.enabled">
              <timeline-event side="right">
                <timeline-badge ng-class="{'disable': formApiHealthCheckTrigger.$invalid, 'info': formApiHealthCheckTrigger.$valid}">
                  <gv-icon class="healthcheck-timeline-icon" shape="av:play_arrow"> </gv-icon>
                </timeline-badge>
                <timeline-panel ng-class="{'disable': formApiHealthCheckTrigger.$invalid, 'info': formApiHealthCheckTrigger.$valid}">
                  <timeline-heading>
                    <div class="healthcheck-summary-timeline-title">Trigger</div>
                  </timeline-heading>
                  <p>Health-check is running with cron <br /><code>{{healthCheckCtrl.healthcheck.schedule}}</code></p>
                </timeline-panel>
              </timeline-event>
              <timeline-event side="right">
                <timeline-badge ng-class="{'disable': formApiHealthCheckRequest.$invalid, 'info': formApiHealthCheckRequest.$valid}">
                  <gv-icon class="healthcheck-timeline-icon" shape="action:http"> </gv-icon>
                </timeline-badge>
                <timeline-panel ng-class="{'disable': formApiHealthCheckRequest.$invalid, 'info': formApiHealthCheckRequest.$valid}">
                  <timeline-heading>
                    <div class="healthcheck-summary-timeline-title">Request</div>
                  </timeline-heading>
                  <span style="font-weight: bold"><code>{{healthCheckCtrl.buildRequest()}}</code></span>
                  <p ng-repeat="header in healthCheckCtrl.healthcheck.steps[0].request.headers track by $index">
                    &bigoplus; {{healthCheckCtrl.healthcheck.steps[0].request.headers[$index].name}}:
                    {{healthCheckCtrl.healthcheck.steps[0].request.headers[$index].value}}
                  </p>
                </timeline-panel>
              </timeline-event>
              <timeline-event side="right">
                <timeline-badge ng-class="{'disable': formApiHealthCheckResponse.$invalid, 'info': formApiHealthCheckResponse.$valid}">
                  <gv-icon class="healthcheck-timeline-icon" shape="navigation:check"> </gv-icon>
                </timeline-badge>
                <timeline-panel ng-class="{'disable': formApiHealthCheckResponse.$invalid, 'info': formApiHealthCheckResponse.$valid}">
                  <timeline-heading>
                    <div class="healthcheck-summary-timeline-title">Assertions</div>
                  </timeline-heading>
                  <p ng-repeat="assertion in healthCheckCtrl.healthcheck.steps[0].response.assertions track by $index">
                    &bigoplus; {{healthCheckCtrl.healthcheck.steps[0].response.assertions[$index]}}
                  </p>
                </timeline-panel>
              </timeline-event>
            </timeline>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
